<template>
  <el-card class="analysis-chart-card"
           style="min-height: 246px; overflow: auto">
    <div class="flex-between m-bottom20">
      <div class="flex m-bottom20">
        <div class="line"></div>
        <div class="fontSize16"
             style="font-weight: 700">今日数据
          <span class="fontSize16"
                style="color: rgb(153, 153, 153)"></span>
        </div>

      </div>
      <!-- <el-button v-if="flag"
                 type="primary"
                 :loading="loadingUpdata"
                 @click="updata()">
        更新
      </el-button> -->
    </div>
    <div>
      <el-row :gutter="20">
        <el-col v-bind="
            styleResponsive ? { lg: 6, md: 7, sm: 7, xs: 7 } : { span: 6 }
          ">
          <div style="display: flex; justify-content: space-between">
            <div class="blue flex-column-between">
              <div class="flex-between">
                <span class="fontSize14"
                      style="color: #fff">充值金额</span>
                <img class="icon"
                     src="../../../../assets/会员卡首页/组合 1035.png"
                     alt="" />
              </div>
              <div class="flex-between">
                <span class="fontSize24"
                      style="color: #fff">{{
                  amountTotalObject?.recharge_total
                }}元</span>
              </div>
              <div class="flex-between"
                   style="color: #fff">
                <span class="fontSize14">今日新增{{ amountTotalObject?.recharge_today }}元</span>
                <span class="fontSize14">昨日{{ amountTotalObject?.recharge_yesterday }}元</span>
              </div>
            </div>
          </div>
        </el-col>
        <el-col v-bind="
            styleResponsive ? { lg: 6, md: 7, sm: 7, xs: 7 } : { span: 6 }
          ">
          <div style="display: flex; justify-content: space-between">
            <div class="pink flex-column-between">
              <div class="flex-between">
                <span class="fontSize14"
                      style="color: #fff">商城销售额</span>
                <img class="icon"
                     src="../../../../assets/会员卡首页/组合 1036.png"
                     alt="" />
              </div>
              <div class="flex-between">
                <span class="fontSize24"
                      style="color: #fff">{{
                  amountTotalObject?.goods_total
                }}元</span>
              </div>
              <div class="flex-between"
                   style="color: #fff">
                <span class="fontSize14">今日新增{{ amountTotalObject?.goods_today }}元</span>
                <span class="fontSize14">昨日{{ amountTotalObject?.goods_yesterday }}元</span>
              </div>
            </div>
          </div>
        </el-col>
        <el-col v-bind="
            styleResponsive ? { lg: 6, md: 7, sm: 7, xs: 7 } : { span: 6 }
          ">
          <div style="display: flex; justify-content: space-between">
            <div class="orange flex-column-between">
              <div class="flex-between">
                <span class="fontSize14"
                      style="color: #fff">套餐卡充值金额</span>
                <img class="icon"
                     src="../../../../assets/会员卡首页/组合 1037.png"
                     alt="" />
              </div>
              <div class="flex-between">
                <span class="fontSize24"
                      style="color: #fff">{{
                  amountTotalObject.package_total
                }}元</span>
              </div>
              <div class="flex-between"
                   style="color: #fff">
                <span class="fontSize14">今日新增{{ amountTotalObject.package_today }}元</span>
                <span class="fontSize14">昨日{{ amountTotalObject.package_yesterday }}元</span>
              </div>
            </div>
          </div>
        </el-col>
        <el-col v-bind="
            styleResponsive ? { lg: 6, md: 7, sm: 7, xs: 7 } : { span: 6 }
          ">
          <div style="display: flex; justify-content: space-between">
            <div class="purple flex-column-between">
              <div class="flex-between">
                <span class="fontSize14"
                      style="color: #fff">用户总数</span>
                <img class="icon"
                     src="../../../../assets/会员卡首页/组合 1038.png"
                     alt="" />
              </div>
              <div class="flex-between">
                <span class="fontSize24"
                      style="color: #fff">{{
                  amountTotalObject.user_total
                }}</span>
              </div>
              <div class="flex-between"
                   style="color: #fff">
                <span class="fontSize14">今日新增{{ amountTotalObject.user_today }}</span>
                <span class="fontSize14">昨日{{ amountTotalObject.user_yesterday }}</span>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </el-card>
</template>

<script>

import { amountTotal } from '@/api/homeConsole/index';
export default {
  props: {
    totloPrice: Object
  },

  data () {
    return {
      count: 0,
      disabled: false,
      amountTotalObject: null,
      flag: null,
      loadingUpdata: false
    };
  },
  computed: {
    // 是否开启响应式布局
    styleResponsive () {
      return this.$store.state.theme.styleResponsive;
    }
  },
  activated () {

  },
  mounted () {
    this.init();

  },
  methods: {
    // 更新版本

    async init () {
      console.log('11');
      const res = await amountTotal();
      console.log(res);
      if (res.code == 0) {
        this.amountTotalObject = res.data;
      }
    },
    /* 获取数据 */
    load () {
      if (this.count >= 20) {
        this.disabled = true;
      } else {
        this.count += 2;
      }
    }
  }
};
</script>
	
<style lang="less" scoped>
.analysis-chart-card {
  .line {
    width: 4px;
    height: 25px;
    margin-right: 5px;
    background: rgb(90, 158, 247);
  }
  font-size: 30px;

  height: 100%;

  background: rgb(255, 255, 255);
  .blue {
    padding: 9px;
    width: 100%;
    height: 120px;
    border-radius: 10px;

    box-shadow: 0px 5px 8px 2px rgba(70, 89, 254, 0.24);
    background: rgb(70, 89, 254);
    .icon {
      width: 38px;
      height: 38px;
    }
  }
  .pink {
    padding: 9px;
    width: 100%;
    height: 120px;
    border-radius: 10px;

    box-shadow: 0px 5px 8px 2px rgba(70, 89, 254, 0.24);
    background: rgb(255, 49, 111);
    .icon {
      width: 38px;
      height: 38px;
    }
  }
  .orange {
    padding: 9px;
    width: 100%;
    height: 120px;
    border-radius: 10px;

    box-shadow: 0px 5px 8px 2px rgba(70, 89, 254, 0.24);
    background: rgb(247, 108, 65);
    .icon {
      width: 38px;
      height: 38px;
    }
  }
  .purple {
    padding: 9px;
    width: 100%;
    height: 120px;
    border-radius: 10px;

    box-shadow: 0px 5px 8px 2px rgba(70, 89, 254, 0.24);
    background: rgb(158, 10, 255);
    .icon {
      width: 38px;
      height: 38px;
    }
  }
}

.analysis-chart-card-content {
  height: 40px;
  box-sizing: border-box;
  margin-bottom: 12px;
}

.analysis-chart-card-text {
  padding-top: 12px;
}
</style>
	